<template>
    <div class="resetVerify">
        <assets-head :title="title" />
        <div class="content">
            <div>
                <div class="mb-25 textColor">{{ $t('证件照/上传护照') }}</div>
                <div class="flex mt-33 mb-80 justify-between">
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            
                            <van-uploader  v-model="frontFile" multiple
                                :max-count="1" :after-read="afterRead" @click-upload="onClickUpload('frontFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件正面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            
                            <van-uploader  v-model="reverseFile" multiple
                                :max-count="1" :after-read="afterRead" @click-upload="onClickUpload('reverseFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件反面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            
                            <van-uploader  v-model="fileList" multiple
                                :max-count="1" :after-read="afterRead" @click-upload="onClickUpload('fileList')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{$t('手持证件照')}}</div>
                    </div>
                </div>
            </div>
            <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
            <div v-if="type==0">
                <ExInput :label="$t('资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="password" :tips="$t('请输入6位数字')"
                    typeText="password" />
                <ExInput :label="$t('确认资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="repassword"
                    :tips="$t('请输入6位数字')" typeText="password" />
            </div>
            <ExInput :label=" $t('留言')" :placeholderText="$t('请输入留言')" v-model="remark" />
            <div class="btn" @click="submit">{{ $t('确定') }}</div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ExChecked from "@/components/ex-checked";
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
import { Uploader } from 'vant';
import Axios from "@/API/userCenter.js";
    export default {
        props: {

        },
        components: {
            [Uploader.name]: Uploader,
            assetsHead,
            ExInput,
            ExChecked
        },
        data(){
            return {
                title:'',
                remark:'',
                password:'',
                repassword:'',
                type:0,
                radio:0,
                list: [
                    {
                        name: this.$t('重置资金密码'),
                        type: 0
                    },
                    // {
                    //     name: this.$t('重置手机号'),
                    //     type: 1
                    // },
                    {
                        name: this.$t('重置邮箱'),
                        type: 2
                    },
                    {
                        name: this.$t('重置谷歌验证'),
                        type: 3
                    },
                ],
                frontFile: [],
                reverseFile: [],
                fileList: [],
                idcard_path_front:'',
                idcard_path_back:'',
                idcard_path_hold:'',
                curFile: 'frontFile',
                status: '', // 0
            }
        },
        mounted(){
            let type = this.$route.query.type;
            this.type = type;
            this.init(this.type);
            this.getSafewordApply();
        },
        methods: {
            init(type) {
                if (type == 1) {
                    this.title = this.$t("人工重置手机号");
                } else if (type == 2) {
                    this.title = this.$t("人工重置邮箱");
                } else if (type == 3) {
                    this.title = this.$t("人工重置谷歌验证");
                } else {
                    this.title = this.$t("人工重置资金密码");
                }
            },
            onChecked(index) {
                this.type = index;
                this.init(this.type)
            },
            afterRead(file) { /// 处理文件
              console.log(file);
              file.status = 'uploading'
                file.message = this.$t('上传中...')
                _uploadImage(file).then(data => {
                    file.status = 'success';
                    file.message = this.$t('上传成功');
                    file.resURL = data
                    this[this.curFile] = [file]
                }).catch(err => {
                    file.status = 'failed';
                    file.message = this.$t('图片上传失败');
                })
            },
            onClickUpload(type) {
              console.log(type);
              this.curFile = type
            },
            getSafewordApply(){
                Axios.getSafewordApply({
                }).then((res) => {
                    if(res.data.length!=0){
                        this.status = res.data[0].status;
                        this.idcard_path_front = res.data[0].idcard_path_front
                        this.idcard_path_back = res.data[0].idcard_path_back
                        this.idcard_path_hold = res.data[0].idcard_path_hold
                    }
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
                });
            },
            setSafewordApply(){
                let operate ;
                if(this.type ==0 ){
                    operate = 0
                } else if (this.type == 1){
                    operate= 3
                } else if (this.type == 2) {
                    operate = 1
                }
                Axios.setSafewordApply({
                    idcard_path_front: this.frontFile.length && this.frontFile[0].resURL || '',
                    idcard_path_back: this.reverseFile.length && this.reverseFile[0].resURL  ||'',
                    idcard_path_hold: this.fileList.length && this.fileList[0].resURL  ||'',
                    operate: operate, //0 修改资金 1取消谷歌绑定 ，2取消手机绑定 3取消邮箱绑定
                    safeword: this.password,
                    safeword_confirm: this.repassword,
                    remark: this.remark
                }).then((res) => {
                    this.$router.push({ name: 'resetSuccess', query: { type: this.type } })
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}      
                });
            },
            submit(){
                this.setSafewordApply();

            }
        }
    }
</script>

<style lang="scss" scoped>
.resetVerify{
    width: 100%;
    box-sizing: border-box;
}


.content{
    font-size: 26px;
    padding: 32px;
    border-top: 1px solid $line_color;
}
.btn {
    background: $btn_main;
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
}
.upload-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img{
        height: 100%;
    }
}
.opacity0{
    opacity: 0;
}
.opacity1 {
    opacity: 1;
}
.imgShow{
    top: 0;
    position: absolute;
}
</style>